<template>
  <section>
    <div class="box">
      <cube-slide
        ref="slide"
        :data="newsList"
        :loop="true"
        :auto-play="true"
        :interval="3000"
        :showDots="false"
        direction="vertical"
      >
        <cube-slide-item v-for="(item, index) in newsList" :key="index">
          <h2>
            <i class="iconfont icon-news"></i>
            {{item}}
          </h2>
        </cube-slide-item>
      </cube-slide>
    </div>
  </section>
</template>

<script>
export default {
  name: "NewsList",
  data () {
    return {
      newsList: ["kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk","asdf"]
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl'
section {
  background #ffffff
  height 44px
  padding 0 2vw
  .box {
    line-height 32px
    background rgba(239, 239, 239, 0.5)
    border-radius 20px
    height 74%
    position relative
    color rgba(0, 0, 0, 0.7)
    top 13%
    h2 {
      padding 0 15px
      ellipsis()
      i.iconfont {
        font-size 16px!important
        margin-right 8px
        color $colorPrimary
      }
    } 
  }
}
</style>
